<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">按钮</button>
<div class="box">
    <span>span 1</span>
    <span>span 2</span>
</div>

<script>

// 箭头函数和普通函数的区别：

// 1.箭头函数没有函数声明的形式
// function fn1(){
//     console.log( '函数声明' );
// }
// fn2() => {
//     console.log( '函数声明' );
// }


// 2.箭头函数内部没有自己的this
// 箭头函数内部的this指向，取决于定义函数的位置/环境，而非函数的调用对象
// 箭头函数中的this为外部环境的this
// console.log( this );// window
// let obj = {
//     name: '晶姐姐',
//     say1: function (){
//         console.log( this );
//     },
//     say2: () => {
//         console.log( this );
//     }
// }
// obj.say1();// this -> obj
// obj.say2();// this -> window

// let btn = document.querySelector('.btn');
// btn.onclick = function (){
//     console.log( this );// btn
//     setTimeout(function (){
//         console.log( this );// window
//     },1000);
//     setTimeout(()=>{
//         console.log( this );// btn
//     },1000);
// }


// 3.箭头函数内部的this不能修改指向
// var name = '老张';
// let obj1 = {
//     name: '老王'
// }

// setTimeout(function (){
//     console.log( this.name );// '老王'
// }.bind(obj1),10);

// setTimeout(()=>{
//     console.log( this.name );
// }.bind(obj1),10);// 语法错误


// 4.箭头函数不能作为构造函数使用（不能new）
// let fun1 = function (){}
// let f1 = new fun1();
// console.log( f1 );// fun1 {}

// let fun2 = ()=>{}
// let f2 = new fun2();// 报错
// console.log( f2 );


// 5.箭头函数没有prototype属性
// let fun3 = ()=>{}
// console.log( fun3.prototype );// undefined
// console.log( fun3.__proto__ ===  Function.prototype);// true


// 6.箭头函数内部没有arguments对象
// let fun4 = () => {
//     console.log( arguments );
// }
// fun4(1,2,3);

</script>
</body>
</html>